<template>
  <PageWrapper>
    <div class="bg">
      <a-space direction="vertical" style="width: 100%">
        <Description title="基础示例" :column="3" :data="mockData" :schema="schema" />
        <Description title="垂直示例" layout="vertical" :column="2" :data="mockData" :schema="schema" />
        <Description @register="register" />
        <Description @register="register1" />
      </a-space>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup name="assemblyDescription">
import { reactive, ref } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { Description, useDescription, DescItem } from '@/components/Description/index'

const mockData: Recordable = reactive({
  username: 'test',
  nickName: 'VB',
  age: '123',
  phone: '15695909xxx',
  email: '190848757@qq.com',
  addr: '厦门市思明区',
  sex: '男',
  certy: '3504256199xxxxxxxxx',
  tag: 'orange'
})
const schema: DescItem[] = [
  {
    field: 'username',
    label: '用户名'
  },
  {
    field: 'nickName',
    label: '昵称',
    render: (curVal, data) => {
      return `${data.username}-${curVal}`
    }
  },
  {
    field: 'phone',
    label: '联系电话'
  },
  {
    field: 'email',
    label: '邮箱'
  },
  {
    field: 'addr',
    label: '地址'
  }
]
const [register] = useDescription({
  title: 'useDescription',
  data: mockData,
  schema: schema
})

const [register1] = useDescription({
  title: '无边框',
  bordered: false,
  data: mockData,
  schema: schema
})
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
